﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格过滤</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="page-wraper">

        <h3 class="page-title">表格过滤</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="index.html">页面元素</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">表格过滤</a>
                </li>
            </ul>
        </div>

        <div class="page-filter">
            <div class="form-inline">
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group form-datetime">
                    <div class="startTime input-time">
                        <input type="text" class="input mini" placeholder="开始时间">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <label class="text-join">到</label>
                    <div class="endTime input-time">
                        <input type="text" class="input mini" placeholder="结束时间">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="input" placeholder="这里写什么东西">
                </div>
                <div class="form-group">
                    <input type="text" class="input" placeholder="这里写好东西">
                </div>
            </div>
            <div class="btn-bar">
                <button class="btn btn-primary" type="submit">搜索</button>
            </div>
        </div>

        <div class="page-filter">
            <div class="form-inline">
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group form-datetime">
                    <div class="startTime input-time">
                        <input type="text" class="input mini" placeholder="开始时间">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <label class="text-join">到</label>
                    <div class="endTime input-time">
                        <input type="text" class="input mini" placeholder="结束时间">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="input" placeholder="这里写什么东西">
                </div>
                <div class="form-group">
                    <input type="text" class="input" placeholder="这里写好东西">
                </div>
            </div>
            <div class="form-inline">
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group form-datetime">
                    <div class="startTime input-time">
                        <input type="text" class="input mini">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <label class="text-join">到</label>
                    <div class="endTime input-time">
                        <input type="text" class="input mini">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
                <div class="form-group form-checkbox">
                    <label class="checkbox-inline">
                        <input type="checkbox" />篮球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />足球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />乒乓球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />篮球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />足球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />乒乓球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />足球
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" />乒乓球
                    </label>
                </div>
            </div>
            <div class="btn-bar">
                <button class="btn btn-primary" type="submit">搜索</button>
                <a href="javascript:void(0);" class="btn btn-link">高级</a>
            </div>
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">框架首页布局</h3>
            </div>
            <div class="panel-body">
                <pre><code data-language="html">
//表格过滤，点击高级会展开所有的过滤属性，改js写在jquery.mui.js文件当中，默认会自动执行
//表格过滤样式千差万别，如果现有样式不能满足，请及时和我沟通
//注意：过滤框当中不允许在文本输入之前添加文字，文字说明默认是placeholder，对于IE低版本的浏览器，后期会专门处理
id="//基本的表格过滤代码如下（单行过滤）"
<div class="page-filter">
    <div class="form-inline">
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group form-datetime">
            <div class="startTime input-time">
                <input type="text" class="input mini">
                <i class="fa fa-calendar"></i>
            </div>
            <label class="text-join">到</label>
            <div class="endTime input-time">
                <input type="text" class="input mini">
                <i class="fa fa-calendar"></i>
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="input" placeholder="这里写什么东西">
        </div>
        <div class="form-group">
            <input type="text" class="input" placeholder="这里写好东西">
        </div>
    </div>
    <div class="btn-bar">
        <button class="btn btn-primary" type="submit">搜索</button>
    </div>
</div>

id="//高级的表格过滤代码如下"
<div class="page-filter">
    <div class="form-inline">
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group form-datetime">
            <div class="startTime input-time">
                <input type="text" class="input mini" placeholder="开始时间">
                <i class="fa fa-calendar"></i>
            </div>
            <label class="text-join">到</label>
            <div class="endTime input-time">
                <input type="text" class="input mini" placeholder="结束时间">
                <i class="fa fa-calendar"></i>
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="input" placeholder="这里写什么东西">
        </div>
        <div class="form-group">
            <input type="text" class="input" placeholder="这里写好东西">
        </div>
    </div>
    <div class="form-inline">
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group">
            <select class="select">
                <option selected="selected">区域选择</option>
                <option>北京区域</option>
                <option>浙江区域</option>
                <option>南京区域</option>
                <option>厦门区域</option>
            </select>
        </div>
        <div class="form-group form-datetime">
            <div class="startTime input-time">
                <input type="text" class="input mini" placeholder="开始时间">
                <i class="fa fa-calendar"></i>
            </div>
            <label class="text-join">到</label>
            <div class="endTime input-time">
                <input type="text" class="input mini" placeholder="结束时间">
                <i class="fa fa-calendar"></i>
            </div>
        </div>
        <div class="form-group form-checkbox">
            <label class="checkbox-inline">
                <input type="checkbox" />篮球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />足球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />乒乓球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />篮球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />足球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />乒乓球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />足球
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />乒乓球
            </label>
        </div>
    </div>
    <div class="btn-bar">
        <button class="btn btn-primary" type="submit">搜索</button>
        <a href="javascript:void(0);" class="btn btn-link">高级</a>
    </div>
</div>
                    </code></pre>
            </div>
        </div>
        <div class="returnback" id="returnTop">
            <a href="javascript:void(0);">
                <i class="fa fa-arrow-up"></i>
            </a>
        </div>
    </div>

    <!--JS代码-->
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
